<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Contact</title>
    <link href="css/tutorial.css" media="all" type="text/css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script src="runonload.js" type="text/javascript"></script>
    <script type="text/javascript">
      runOnLoad(function(){$("input#name").select().focus();});
       
      $(function() {
        $('.error').hide();
        $('input.text-input').css({backgroundColor:"#FFFFFF"});
        $('input.text-input').focus(function(){
            $(this).css({backgroundColor:"#FFDDAA"});
      });
      
      $('input.text-input').blur(function(){
        $(this).css({backgroundColor:"#FFFFFF"});
      });
      
        $('.error').hide();
        $(".button").click(function() {
          // validate and process form here
          $('.error').hide();
  	      var name = $("input#name").val();
  		  if (name == "") {
            $("label#name_error").show();
            $("input#name").focus();
            return false;
          }
  		  var email = $("input#email").val();
  		  if (email == "") {
            $("label#email_error").show();
            $("input#email").focus();
            return false;
          }
  		  var phone = $("input#phone").val();
  		  if (phone == "") {
            $("label#phone_error").show();
            $("input#phone").focus();
            return false;
          }

          var dataString = "name="+ name + "&email=" + email + "&phone=" + phone;
          // alert (dataString);
          $.ajax({
            type: "POST",
            url: "/Service.asmx/Contact",
            dataType: "xml",
            data: dataString,
            processData: false,
        	// ajaxError(XMLHttpRequest,textStatus, errorThrown); },
        	error: function(XMLHttpRequest, textStatus, errorThrown) { 
        	    alert(XMLHttpRequest);
        	    alert(textStatus);
        	    alert(errorThrown);
        	},        	
            success: function() {  
              $('#contact_form').html("<div id='message'></div>");  
              $('#message').html("<h2>Contact Form Submitted!</h2>")    
              .append("<p>We will be in touch soon.</p>")  
              .hide()  
              .fadeIn(1500, function() {  
                $('#message').append("<img id='checkmark' src='images/check.png' />");  
              });  
            }
          });
          return false;
          
        }); // end click
      });
      </script>
</head>
<body>
  <div id="contact_form">
  <form id="contact" name="contact" action="">
    <fieldset>
      <label for="name" id="name_label">Name:</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">Name is required.</label>
      
      <label for="email" id="email_label">Email:</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />
      <label class="error" for="email" id="email_error">Email is required.</label>
      
      <label for="phone" id="phone_label">Phone:</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
      <label class="error" for="phone" id="phone_error">Phone is required.</label>
      
	    <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
    </fieldset>
  </form>
  </div>	
</body>
</html>